<template>
  <div class="dam-screen">
    <damHeader />
    <div class="dam-body">
      <!-- 左侧区域 -->
      <div class="dam-aside w-e-text">
        <!-- 搜索 -->
        <div class="dam-search">
          <Input
            placeholder="Search"
            v-model="key"
            @keyup.enter.native="damSearch"
          >
            <Icon
              type="ios-search"
              @click="damSearch"
              class="dam-search"
              slot="suffix"
            />
          </Input>
        </div>
        <!-- 复选框 -->
        <div
          class="dam-checkbox-group"
          v-for="(item, index) in tagTypeList"
          :key="item.tagType + index"
        >
          <div class="group-header">{{ item.tagType }}</div>
          <div class="group-body">
            <CheckboxGroup
              v-model="usageCheck"
              @on-change="checkAllGroupChange"
            >
              <Checkbox
                v-for="(listItem, listIndex) in item.tagList"
                :key="listItem.tagName + listIndex"
                :label="listItem.newTag"
              >
                <div class="checkbox-num">
                  <span>{{ listItem.tagName }}</span>
                  <span class="num-txt">{{ listItem.docCount }}</span>
                </div>
              </Checkbox>
            </CheckboxGroup>
          </div>
        </div>
        <!-- 文件树 -->
        <div class="files-tree">
          <div class="group-header">Folders</div>
          <Tree
            :data="baseData"
            :render="renderContent"
            :load-data="loadData"
            @on-select-change="tapChooseFile"
          >
          </Tree>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="dam-section-body">
        <div class="nav-keyword">
          <div class="nav-tag">
            <Tag
              v-for="item in keyWords"
              :key="item"
              closable
              @on-close="handleClose(item)"
              >{{ item | tagFilter }}</Tag
            >
            <Tag v-if="key != ''" @on-close="deleteKey" closable>{{ key }}</Tag>
          </div>
          <div>
            <Icon @click="tapChoose" class="all-choose" type="ios-apps" />
            <Icon
              @click.stop="downloadFileAll"
              class="icon"
              type="ios-download-outline"
            />
          </div>
        </div>
        <div class="breadCrumb" v-if="breadArr && breadArr.length">
          <div
            @click="index + 1 < breadArr.length ? tapBread(item, index) : ''"
            v-for="(item, index) in breadArr"
            :key="index"
            class="bread-li"
          >
            <div class="bread-title">{{ item.categoryName }}</div>
            <div v-if="index + 1 < breadArr.length">/</div>
          </div>
        </div>
        <div class="file-contant activityText w-e-text">
          <div class="file-contant-body" v-if="filesArr && filesArr.length">
            <template v-for="(item, index) in filesArr">
              <!-- 文件夹 -->
              <template v-if="item.fileType == 'category'">
                <div class="file-ul" @click="tapParent(item)" :key="index">
                  <div class="file-item">
                    <div class="file-img-box">
                      <div class="img-show">
                        <img
                          class="default-img"
                          :src="item.thumbnailUrl"
                          alt=""
                        />
                        <!-- <img class="default-img" src="@/assets/images/base.jpg" alt="" /> -->
                      </div>
                    </div>
                  </div>
                  <div class="file-name">{{ item.category }}</div>
                </div>
              </template>
              <!-- 文件 -->
              <template v-else>
                <div
                  class="file-ul"
                  @mouseenter="fileEnter($event, item, index)"
                  @click="tapDetail(item)"
                  :key="index"
                >
                  <div class="image-hover" :ref="'showImg' + index">
                    <img class="default-img" :src="item.thumbnailUrl" alt="" />
                  </div>
                  <div class="file-item-children">
                    <img class="default-img" :src="item.thumbnailUrl" alt="" />
                    <!-- 播放icon -->
                    <div class="play-video" v-if="item.assetType == 'Video'">
                      <img
                        src="@/assets/images/play.png"
                        class="play-video-icon"
                        alt=""
                      />
                    </div>
                    <!-- 下载按钮 -->
                    <div class="source-btn">
                      <Icon
                        @click.stop="downloadFile(item)"
                        type="ios-download-outline"
                      />
                    </div>
                    <div class="cam-more-btn" v-if="canMore">
                      <!-- <Checkbox
                        @click.stop.native="() => {}"
                        v-model="item.single"
                      ></Checkbox> -->
                      <div
                        class="self_checkbox"
                        @click.stop="() => {}"
                        @click="checkDowItem(item, index)"
                      >
                        <img
                          v-if="item.single"
                          src="@/assets/images/un-border.png"
                          alt=""
                        />
                        <img v-else src="@/assets/images/border.png" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="file-name">{{ item.name }}</div>
                </div>
              </template>
            </template>
          </div>
          <!-- <div v-else class="no-file">
            <div>
              <img
                class="empty-img"
                src="@/assets/images/empty-list.png"
                alt=""
              />
            </div>
            暂无数据~
          </div> -->
        </div>
      </div>
    </div>
    <!-- 图片详情弹框 -->
    <Modal v-model="detailModal" width="56%" :fullscreen="true">
      <div slot="header" class="modal-header">
        <span>{{ modalItem.name || "详情" }}</span>
        <Icon
          class="download-icon"
          @click.stop="downloadFile(modalItem)"
          type="ios-download-outline"
        ></Icon>
      </div>
      <div class="modal-source" v-if="detailModal">
        <div class="modal-left">
          <div class="pre btn_nav" @click="preBtn" v-if="itemIndex > 0">
            <img src="@/assets/images/pre.png" alt="">
          </div>
          <div class="next btn_nav" @click="nextBtn" v-if="itemIndex < filesArr.length - 1">
            <img src="@/assets/images/next.png" alt="">
          </div>
          <div class="img-item" v-if="modalItem.assetType == 'Photography'">
            <img class="default-img" :src="modalItem.url" alt="" />
          </div>
          <div
            class="video-item"
            v-else-if="modalItem.assetType != 'Photography'"
          >
            <video
              data-v-6ea9570c=""
              controls="controls"
              :src="modalItem.url"
              loop="loop"
              type="video/mp4"
              class="modal-video"
            >
              <source
                data-v-6ea9570c=""
                :src="modalItem.url"
                type="video/mp4"
              />
            </video>
          </div>
          <div class="pdf-item w-e-text" v-else>
            <pdf
              style="width: 100%; height: 100%"
              ref="pdf"
              v-for="i in numPages"
              :key="i"
              :src="pdfSrc"
              :page="i"
            ></pdf>
          </div>
        </div>
        <div class="modal-right w-e-text">
          <!-- 图片 -->

          <div class="title">Keywords</div>
          <div class="ip-box">
            <div class="ip-item" v-for="item in modalItem.ip" :key="item">
              {{ item }}
            </div>
          </div>
          <div class="title">Asset</div>
          <Form :label-width="130" label-position="left">
            <FormItem label="Sub Brand">{{
              modalItem.subBrand || ""
            }}</FormItem>
            <FormItem label="Season">{{ modalItem.season || "" }}</FormItem>
            <FormItem label="Year">{{ modalItem.year || "" }}</FormItem>
            <FormItem label="Style Number">{{
              modalItem.styleNumber || ""
            }}</FormItem>
            <FormItem label="CC Number">{{
              modalItem.ccNumber || ""
            }}</FormItem>
            <FormItem label="Collection">{{
              modalItem.collection || ""
            }}</FormItem>
            <FormItem label="KOL">{{ modalItem.kol || "" }}</FormItem>
            <FormItem label="Model">{{ modalItem.model || "" }}</FormItem>
            <FormItem label="Model Figure">{{
              modalItem.modelFigure || ""
            }}</FormItem>
            <FormItem label="Model BWH">{{
              modalItem.modelBwh || ""
            }}</FormItem>
            <FormItem label="Asset Type">{{
              modalItem.assetType || ""
            }}</FormItem>
            <FormItem label="Gap Department">{{
              modalItem.gapDepartment || ""
            }}</FormItem>
            <FormItem label="Usage Restrictions">{{
              modalItem.usageRestrictions || ""
            }}</FormItem>
            <FormItem label="Regional Usage">{{
              modalItem.regionalUsage || ""
            }}</FormItem>
            <FormItem label="Usage Start Date">{{
              modalItem.usageStartDate || ""
            }}</FormItem>
            <FormItem label="Usage Expiration">{{
              modalItem.usageExpiration || ""
            }}</FormItem>
            <FormItem label="Status">{{
              modalItem.publishStatus || ""
            }}</FormItem>
            <FormItem label="File size">{{
              modalItem.fileSize || ""
            }}</FormItem>
            <FormItem label="Dimensions">{{
              modalItem.dimensions || ""
            }}</FormItem>
            <!-- <FormItem label="Color space">{{
              modalItem.colorSpace || ""
            }}</FormItem> -->
            <FormItem label="File type">{{
              modalItem.fileType || ""
            }}</FormItem>
            <!-- <FormItem label="File Format">{{
              modalItem.fileFormat || ""
            }}</FormItem> -->
            <FormItem label="Campaign Name">{{
              modalItem.campaignName || ""
            }}</FormItem>
            <FormItem label="Belonging">{{
              modalItem.belonging || ""
            }}</FormItem>
            <FormItem label="Retouching Vendor">{{
              modalItem.retouchingVendor || ""
            }}</FormItem>
            <!-- <FormItem label="RetouchingProject Number">{{
              modalItem.retouchingProjectNumber || ""
            }}</FormItem>             -->
            <FormItem label="Date Created">{{
              modalItem.dateCreated || ""
            }}</FormItem>
            <FormItem label="Uploaded">{{ modalItem.uploaded || "" }}</FormItem>
          </Form>
        </div>
      </div>
      <div slot="footer">
        <Button size="small" @click="closeModal">关闭</Button>
      </div>
    </Modal>
    <!-- 下载 -->
    <Modal
      v-model="downloadModal"
      title="Select yuor dowmload options"
      width="500"
      :footer-hide="true"
    >
      <div>
        <Form ref="form" :label-width="100">
          <FormItem label="Desired preset">
            <Select style="width: 100%" v-model="downloadOption">
              <Option value="Compressed">Compressed</Option>
              <Option value="Original">Original</Option>
            </Select>
          </FormItem>
        </Form>
        <Row class="code-row-bg" justify="end" type="flex">
          <Button @click="save" type="primary">SUBMIT</Button>
          <Button @click="cancel" style="margin-left: 10px">CANCEL</Button>
        </Row>
      </div>
    </Modal>
    <!-- 下载 -->
    <Modal
      v-model="downloadModal"
      title="Select yuor dowmload options"
      width="500"
      :footer-hide="true"
    >
      <div>
        <Form ref="form" :label-width="100">
          <FormItem label="Desired preset">
            <Select style="width: 100%" v-model="downloadOption">
              <Option value="Compressed">Compressed</Option>
              <Option value="Original">Original</Option>
            </Select>
          </FormItem>
        </Form>
        <Row class="code-row-bg" justify="end" type="flex">
          <Button @click="save" type="primary">SUBMIT</Button>
          <Button @click="cancel" style="margin-left: 10px">CANCEL</Button>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
// import 'vuescroll/dist/vuescroll.css';
import VueScroll from "vuescroll/dist/vuescroll-native";
import damHeader from "../../components/dam-header/dam-header";
import { damHomeApi } from "@/api/dam-home.js";
import pdf from "vue-pdf";
import JSZip from "jszip";
import FileSaver from "file-saver";
import axios from "axios";

const getFile = (url) => {
  return new Promise((resolve, reject) => {
    axios({ method: "get", url, responseType: "arraybuffer" })
      .then((data) => {
        resolve(data.data);
      })
      .catch((error) => {
        reject(error.toString());
      });
  });
};

export default {
  name: "damScreen",
  components: {
    VueScroll,
    damHeader,
    pdf,
  },
  data() {
    return {
      tableLoading: false,
      vsOpts: {
        bar: {
          background: "#F6F6F6",
        },
      },
      tagTypeList: [],
      time: 20,
      // 文件夹数组
      baseData: [],
      detailModal: false,
      canMore: false,
      fileType: "folder",
      fileShowArr: [],
      breadArr: [],
      // 筛选选中数组
      usageCheck: [],
      fileTypeCheck: [],
      modelCheck: [],
      // 搜索结果数组
      filesArr: [],
      // 弹框中对象
      modalItem: {},
      scrollHeight: window.innerHeight - 150,
      key: "",
      page: {
        pageNum: 1,
        pageSize: 30,
      },
      fileId: "",
      pdfSrc: "/sc.pdf",
      numPages: 0,
      pagesList: 0,
      pageNumList: 0,
      totalPage: 0,
      isSend: true,
      downloadModal: false,
      downloadOption: "Compressed",
      singleFileItem: "",
      downloadModal: false,
      limit: 3,
      itemIndex: 0
    };
  },
  computed: {
    unreadCount() {
      return this.$store.state.user.unreadCount;
    },
    keyWords() {
      return [...this.usageCheck, ...this.fileTypeCheck, ...this.modelCheck];
    },
    local() {
      return this.$store.state.app.local;
    },
  },
  filters: {
    tagFilter: (value) => {
      return value.split("_")[1];
    },
  },
  created() {
    console.log(this.$route.params);
    if (this.$route.params.key) this.key = this.$route.params.key;
    if (this.$route.params.id) this.fileId = this.$route.params.id;
    this.getQueryRoot();
    this.assetSearch();
    if (this.fileId) this.getQueryAllParent({ id: this.fileId });
    this.$nextTick(() => {
      const el = document.querySelector(".activityText");
      const offsetHeight = el.offsetHeight;
      el.onscroll = () => {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight;
        if (offsetHeight + scrollTop - scrollHeight >= 0) {
          // 需要执行的代码
          console.log("已滚动到底部");
          if (this.pagesList < this.totalPage) {
            this.page.pageNum = this.page.pageNum + 1;
            this.assetSearch();
          }
        }
      };
    });
    this.getNumPages();
    this.getSelectByKey();
  },
  methods: {
    getSelectByKey() {
      damHomeApi.getSelectByKey("download_asset_limit").then((res) => {
        console.log(res);
        this.limit = res.data.configValue;
      });
    },
    // # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfSrc);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          console.log(this.numPages);
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    // 文件树
    async getQueryRoot() {
      console.log(12341);
      try {
        this.tableLoading = true;
        let res = await damHomeApi.getQueryRoot();
        this.pageNumList = res.data.pageNum;
        res.data.forEach((item) => {
          item.children = [];
          item.loading = false;
        });
        this.baseData = res.data;
        this.tableLoading = false;
      } catch (e) {
        this.tableLoading = false;
      }
    },
    // 搜索
    async assetSearch() {
      if (!this.isSend) return;
      this.isSend = false;
      let data = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        searchCount: "",
        orders: [],
        name: this.key,
        tags: this.usageCheck,
        category: this.fileId,
      };
      try {
        this.tableLoading = true;
        let res = await damHomeApi.assetSearch(data);
        this.totalPage = res.data.pages;
        this.pagesList = res.data.pageNum;
        if (res.data && res.data.list && res.data.list.length) {
          res.data.list.forEach((item) => {
            item.single = false;
          });
          if (res.data.tagTypeList.length > 0) {
            res.data.tagTypeList.forEach((item) => {
              item.tagList.forEach((v) => {
                v.newTag = item.tagType + "_" + v.tagName;
              });
            });
            this.tagTypeList = res.data.tagTypeList;
          } else {
            this.tagTypeList = [];
          }
          this.filesArr = [...this.filesArr, ...res.data.list];
        } else {
          this.tagTypeList = [];
        }
        this.tableLoading = false;
        this.isSend = true;
      } catch (e) {
        this.tableLoading = false;
        this.isSend = true;
      }
    },
    // 搜索
    damSearch() {
      this.breadArr = [];
      this.init();
      this.fileId = "";
      this.assetSearch();
    },
    deleteKey() {
      this.key = "";
      this.assetSearch();
    },
    init() {
      this.page.pageNum = 1;
      this.filesArr = [];
    },
    // 文件数初始化
    renderContent(h, { root, node, data }) {
      return (
        <div class="tree-item">
          <icon type="ios-folder" style="margin-right: 5px;" />
          <span>{data.categoryName}</span>
        </div>
      );
    },
    // 查看详情
    async tapDetail(item) {
      try {
        this.tableLoading = true;
        this.modalItem = {}
        let res = await damHomeApi.getFileDetail(item.id);
        console.log("getFileDetail", res);
        if (typeof res.data == "object") {
          this.detailModal = true;
          this.modalItem = res.data;
          this.itemIndex = this.filesArr.findIndex(item => item.id == res.data.id)
        }
        this.tableLoading = false;
      } catch (e) {
        console.error(e);
        this.tableLoading = false;
      }
    },
    // 关闭modal
    closeModal() {
      this.detailModal = false;
    },
    // 下载
    downloadFile(item) {
      this.singleFileItem = item;
      console.log(item);
      if (item.source === "WebDAM") {
        this.downloadModal = true;
      } else {
        this.downloadFileSingle();
      }
    },
    downloadFileAll() {
      let selectArr = JSON.parse(JSON.stringify(this.filesArr));
      let selectedArr = selectArr
        .filter((item) => item.single)
        .map((j) => parseInt(j.id));
      console.log(selectedArr);
      if (selectedArr.length === 0) {
        return this.$Message.error("请选择至少一条数据");
      }
      damHomeApi.downLoadFileMuti({ idArray: selectedArr });
    },
    handleBatchDownload(selectedArr) {
      const data = selectedArr.map((j) => j.downloadUrl);

      // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      data.forEach((item) => {
        const promise = getFile(item).then((data) => {
          console.log("下载文件", item, selectedArr);
          // 下载文件, 并存成ArrayBuffer对象
          // const arr_name = item.split("/");
          const file_name = selectedArr.find(
            (i) => item === i.downloadUrl
          ).name;
          // 获取文件名
          zip.file(file_name, data, { binary: true });
          // 逐个添加文件
          cache[file_name] = data;
        });
        promises.push(promise);
      });
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
          // 生成二进制流
          FileSaver.saveAs(content, "素材.zip");
          // 利用file-saver保存文件
        });
      });
    },
    isImageInChromeNotEdge(fType) {
      let bool = false;
      if (
        window.navigator.userAgent.indexOf("Chrome") !== -1 &&
        window.navigator.userAgent.indexOf("Edge") === -1 &&
        (fType === "JPG" ||
          fType === "GIF" ||
          fType === "PNG" ||
          fType === "BMP" ||
          fType === "JPEG" ||
          fType === "SVG" ||
          fType === "TIF")
      )
        return true;
    },
    downloadNormalFile(src, filename) {
      console.log("normal file downlaod..." + filename);
      let x = new XMLHttpRequest();
      x.open("GET", src, true);
      x.responseType = "blob";
      x.onload = function (e) {
        const url = window.URL.createObjectURL(x.response);
        const link = document.createElement("a");
        link.href = url;
        link.download = filename;
        link.style.display = "none";
        document.body.appendChild(link); // 添加到页面中，为兼容Firefox浏览器
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link); // 从页面移除
      };
      x.send();
    },
    imgToDataURL(url, filename, fileType) {
      this.getBase64(url, fileType, (_baseUrl) => {
        // 创建隐藏的可下载链接
        let eleLink = document.createElement("a");
        eleLink.download = filename;
        eleLink.style.display = "none";
        // 图片转base64地址
        eleLink.href = _baseUrl;
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    },
    getBase64(url, fileType, callback) {
      console.log("base64 downlaod...");
      // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
      // eslint-disable-next-line one-var
      let Img = new Image(),
        dataURL = "";
      Img.src = url;
      Img.setAttribute("crossOrigin", "Anonymous");
      Img.onload = function () {
        // 要先确保图片完整获取到，这是个异步事件
        let canvas = document.createElement("canvas"), // 创建canvas元素
          width = Img.width, // 确保canvas的尺寸和图片一样
          height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height); // 将图片绘制到canvas中
        dataURL = canvas.toDataURL("image/" + fileType); // 转换图片为dataURL
        callback ? callback(dataURL) : null;
      };
    },
    // 删除筛选标签
    handleClose(item) {
      let usageCheck = JSON.parse(JSON.stringify(this.usageCheck));
      let fileTypeCheck = JSON.parse(JSON.stringify(this.fileTypeCheck));
      let modelCheck = JSON.parse(JSON.stringify(this.modelCheck));
      this.usageCheck = usageCheck.filter((j) => j != item);
      this.fileTypeCheck = fileTypeCheck.filter((j) => j != item);
      this.modelCheck = modelCheck.filter((j) => j != item);
      this.init();
      this.assetSearch();
    },
    // 选择文件
    tapChooseFile(evt, item, s) {
      this.getQueryAllParent(item);
      // this.breadArr = this.getParentId(this.baseData, item.id).reverse();
      console.log(this.breadArr);
      this.fileId = item.id;
      this.init();
      this.assetSearch();
    },
    // 获取面包屑
    getQueryAllParent(item) {
      damHomeApi.getQueryAllParent({ id: item.id }).then((res) => {
        console.log(res);
        this.breadArr = res.data;
      });
    },
    // 是否可多选
    tapChoose() {
      this.canMore = !this.canMore;
    },
    tapParent(item) {
      // this.breadArr = this.getParentId(
      //   this.baseData,
      //   item.categoryId
      // ).reverse();
      this.getQueryAllParent(item);
      this.init();
      this.fileId = item.categoryId;
      this.assetSearch();
    },
    // 面包屑
    tapBread(item, index) {
      console.log(index);
      // if (item && item.children && item.children.length) {
      // let breadArrNew = JSON.parse(JSON.stringify(this.breadArr));
      // this.breadArr = breadArrNew.filter((item, i) => i <= index);
      this.getQueryAllParent(item);
      this.init();
      this.fileId = item.id;
      this.assetSearch();
      // }
    },
    // 面包屑过滤数组
    filterVread(item, breadBaseArr) {
      let arr = breadBaseArr.find((i) => {
        if (i.id == item.id) return i.id == item.id;
        if (i.children && i.children.length) {
          this.filterVread(item, i.children);
        }
      });
      return arr;
    },
    getParentId(list, id) {
      for (let i in list) {
        if (list[i].id == id) {
          return [list[i]];
        }
        if (list[i].children) {
          let node = this.getParentId(list[i].children, id);
          if (node !== undefined) {
            return node.concat(list[i]);
          }
        }
      }
    },
    checkAllGroupChange(data) {
      console.log(data);
      this.init();
      this.assetSearch();
    },
    fileEnter(e, item, index) {
      let showImg = this.$refs["showImg" + index][0];
      if (showImg && e.srcElement.offsetLeft + 400 > window.innerWidth) {
        showImg.style.left = -200 + "px";
      }
    },
    // 异步加载子节点
    loadData(item, callback) {
      console.log(item);
      damHomeApi.getQueryChildren({ id: item.id }).then((res) => {
        console.log(res);
        if (res.data && res.data.length) {
          res.data.forEach((item) => {
            item.children = [];
            item.loading = false;
          });
          callback(res.data);
        }
      });
    },
    cancel() {
      this.downloadModal = false;
      this.singleFileItem = "";
    },
    save() {
      let item = this.singleFileItem;
      if (this.downloadOption == "Compressed") {
        this.downloadFileSingle();
      } else {
        window.open(`https://gap.webdamdb.com/bp/#/search/${item.sourceId}`);
      }
      this.cancel();
    },
    downloadFileSingle() {
      let item = this.singleFileItem;
      damHomeApi.downLoadFile(item.id);
    },
    checkDowItem(item, index) {
      let selectArr = JSON.parse(JSON.stringify(this.filesArr));
      let selectedArr = selectArr
        .filter((item) => item.single)
        .map((j) => parseInt(j.id));
      if (selectedArr.length >=  this.limit && !item.single) {
        return this.$Message.error(`一次最多可下载${this.limit}个素材`);
      }
      item.single = !item.single;
    },
    preBtn() {
      this.tapDetail(this.filesArr[this.itemIndex -1])
    },
    nextBtn() {
      this.tapDetail(this.filesArr[this.itemIndex + 1])
    }
  },
};
</script>
<style scoped lang="less">
@import "./dam-screen.less";
</style>